/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-13 14:56:49
 * @LastEditTime: 2023-07-08 14:34:56
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import { Box, Center, Image, Spinner, Stack } from '@chakra-ui/react';

import { useGetImageDTOQuery } from '@tourfly/api';

import ImageContextMenu from './ImageContextMenu';

import IAICheckbox from '@/common/components/IAICheckbox';
import { IAILoadingImageFallback } from '@/common/components/IAIImageFallback';
import { useAppDispatch, useAppSelector } from '@/store/hooks';
import { setDownloadImagesList } from '@/store/user';
export default function GalleryImageItem(props: {
  imageName: string;
  onOpenModal: () => void;
  hiddenToolButton?: boolean;
  isDownloadSelected?: boolean;
}) {
  const { imageName } = props;

  const { downloadImages } = useAppSelector((store) => store.user);
  const { currentData: imageDTO } = useGetImageDTOQuery(imageName);
  const dispatch = useAppDispatch();

  if (!imageDTO) {
    return (
      <Center h="full">
        <Spinner />
      </Center>
    );
  }

  return (
    <ImageContextMenu imageDTO={imageDTO}>
      {(ref) => (
        <Box
          ref={ref}
          role="group"
          w="full"
          bg="base.950"
          rounded="lg"
          pos="relative"
          cursor="pointer"
          onClick={props.onOpenModal}
          overflow="hidden"
        >
          <Image
            w="full"
            objectFit="contain"
            rounded="lg"
            h="full"
            src={imageDTO?.thumbnail_url || imageDTO?.image_url}
            fallbackStrategy="beforeLoadOrError"
            fallback={<IAILoadingImageFallback image={imageDTO} />}
            loading="lazy"
            transition="all 0.3s"
            _groupHover={{
              transform: 'scale(1.15)',
            }}
          />
          {downloadImages && imageDTO && (
            <Box
              onClick={(e) => e.stopPropagation()}
              sx={{
                position: 'absolute',
                top: 1,
                insetInlineEnd: 1,
              }}
            >
              <IAICheckbox
                label=""
                checked={props.isDownloadSelected}
                onChange={(e) => {
                  dispatch(
                    setDownloadImagesList({
                      selected: e.target.checked,
                      imageDTO,
                    })
                  );
                  e.stopPropagation();
                }}
              />
            </Box>
          )}
          <Stack
            _groupHover={{
              opacity: '1',
            }}
            w="full"
            h="12"
            transition="opacity 0.1s ease-in-out 0s"
            opacity={0}
            position="absolute"
            bottom={{ base: '1', md: '0' }}
            p="1"
            borderBottomRadius="md"
            bg="linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)"
            justifyContent="flex-end"
          ></Stack>
        </Box>
      )}
    </ImageContextMenu>
  );
}
